<template>
	<div class="pureNewLogContent accQuery realTimeRecharge realTimeDataClass" :style="{width:realTimeServiceContent}">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'> <i class="icon iconfont">&#xe7d8;</i>
				<span class="title1">当前位置/付费分析/</span>
				<span>{{title}}</span>
			</div>
			<div class="right_header_time">
				<div class="block">
					<span>选择日期范围：</span>
					<el-date-picker
							size='small'
							v-model="date"
							type="daterange"
							align="left"
							placeholder="选择日期范围"
							@change='dateChange'
							:picker-options="pickerOptions"></el-date-picker>
				</div>
			</div>
			<div class="choose_plat">
				<el-menu :theme="this.$store.getters.theme[4]" class="el-menu-demo" mode="horizontal" @select="handleSelect">
					<el-menu-item index="0" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>全平台</el-menu-item>
					<el-menu-item index="3" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>安卓</el-menu-item>
					<el-menu-item index="2" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>iOS</el-menu-item>
					<el-menu-item index="9" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>通用</el-menu-item>
					<el-menu-item index="4" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>高级筛选</el-menu-item>
				</el-menu>
			</div>
		</div>
		<div class="right_content">
			<div class="realTimeServiceTable">
				<div class="realTimeServiceTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">付费总体数据</span>
					<el-button type="primary" size="mini" class="excel"  @click="excel(payAllTableHead,payAllTableData,'付费分析-付费总体数据')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i> 导出excel
					</el-button>
				</div>
				<div class="realTimeServiceTableBody">
					<template>
					  <el-table
					  	v-loading="loading"
    					element-loading-text="拼命加载中"
					    :data="payAllTableData"
					    border
					    :style="{width:realTimeServiceTableWidth}"
					    :default-sort = "{prop: 'data2', order: 'descending'}"
					    >
					    <el-table-column sortable align="center"
					        v-for="col in payAllTableHead"
									:key="col.label"
					        :prop="col.prop" :label="col.label">
					    </el-table-column>
					  </el-table>
					</template>
				</div>
			</div>
			<el-collapse v-model="activeName" accordion>
			  <el-collapse-item name='1' >
			    <template slot="title" >
			      	<span @click='accordionChange'>付费趋势</span>
			    </template>
			    <el-select v-model="payType" filterable @change = "selectPayTypes">
					<el-option v-for="(val,key) in payTypes" :label="val.label" :value="val.value" :key='val.label'></el-option>
	      		</el-select>
		      	<div class="payTrend" id="payTrend" style="width:100%;height:400px;"></div>
		      	<div class="realTimeServiceTable">
			      	<div class="realTimeServiceTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
						<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">付费趋势</span>
						<el-button type="primary" size="mini" class="excel"  @click="excel(payTrendTabelHead,payTrendTabelData,'付费分析-付费趋势')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
							<i class="icon iconfont">&#xe7f0;</i> 导出excel
						</el-button>
					</div>
				    <div class="realTimeServiceTableBody">
						<template>
						  <el-table
						  	v-loading="loading"
	    					element-loading-text="拼命加载中"
						    :data="payTrendTabelData"
						    border
						    :style="{width:realTimeServiceTableWidth}"
						    :default-sort = "{prop: '0', order: 'ascending'}"
						    >
						    <el-table-column sortable align="center"
						        v-for="col in payTrendTabelHead"
										:key="col.label"
						        :prop="col.prop" :label="col.label">
						    </el-table-column>
						  </el-table>
						</template>
					</div>

					<div class="block realTimeServicePage">
						<el-pagination
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:current-page="currentPage"
								:page-sizes="pageSizes"
								:page-size="pageSize"
								layout="total, sizes, prev, pager, next, jumper"
								:total="dataTotal"></el-pagination>
					</div>
				</div>
			  </el-collapse-item>
			  <el-collapse-item name='2' title="付费分类">
			  	<div class="payTypes" style="width:100%;height:400px;display:flex;">
			  		<div class="payType" id="payType1" style="height:400px;"></div>
				    <div class="payType" id="payType2" style="height:400px;"></div>
				    <div class="payType" id="payType3" style="height:400px;"></div>
			  	</div>
		      	<div class="realTimeServiceTable">
			      	<div class="realTimeServiceTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
						<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">付费分类</span>
						<el-button type="primary" size="mini" class="excel"  @click="excel(payTypesTabelHead,payTypesTabelData,'付费分析-付费分类')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
							<i class="icon iconfont">&#xe7f0;</i> 导出excel
						</el-button>
					</div>
				    <div class="realTimeServiceTableBody">
						<template>
						  <el-table
						  	v-loading="loading"
	    					element-loading-text="拼命加载中"
						    :data="payTypesTabelData"
						    border
						    :style="{width:realTimeServiceTableWidth}"
						    :default-sort = "{prop: '0', order: 'ascending'}"
						    >
						    <el-table-column sortable align="center"
						        v-for="col in payTypesTabelHead"
										:key="col.label"
						        :prop="col.prop" :label="col.label">
						    </el-table-column>
						  </el-table>
						</template>
					</div>
				</div>
			  </el-collapse-item>
			  <el-collapse-item name='3' title="付费对比">
			    <el-tabs type="border-card" @tab-click="changeCompareType">
				  <el-tab-pane label="平台对比">
				  	<div class="platContrast" id="platContrast" style="width:100%;height:400px;"></div>
				  </el-tab-pane>
				  <el-tab-pane label="渠道对比">
				  	<div class="channelContrast" id="channelContrast" style="width:100%;height:400px;"></div>
				  </el-tab-pane>
				  <el-tab-pane label="区服对比">
				  	<div class="serverContrast" id="serverContrast" style="width:100%;height:400px;"></div>
				  </el-tab-pane>
				</el-tabs>
				<div class="realTimeServiceTable">
			      	<div class="realTimeServiceTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
						<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">付费对比</span>
						<el-button type="primary" size="mini" class="excel"  @click="excel(payCompareTabelHead,payCompareData,'付费分析-付费对比')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
							<i class="icon iconfont">&#xe7f0;</i> 导出excel
						</el-button>
					</div>
				    <div class="realTimeServiceTableBody">
						<template>
						  <el-table
						  	v-loading="loading"
	    					element-loading-text="拼命加载中"
						    :data="payCompareData"
						    border
						    :style="{width:realTimeServiceTableWidth}"
						    :default-sort = "{prop: '0', order: 'ascending'}"
						    >
						    <el-table-column sortable align="center"
						        v-for="col in payCompareTabelHead"
										:key="col.prop"
						        :prop="col.prop" :label="col.label">
						    </el-table-column>
						  </el-table>
						</template>
					</div>
				</div>
			  </el-collapse-item>
			</el-collapse>
		</div>
		<v-advance ref="advance" :channels='channels' :servers="servers" @get="getData" :post-obj='postObj' @getlist="getList"></v-advance>
		<a href="" :download="xlsxTitle+'.xlsx'" id="hf"></a>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./payIncome.styl"></style>
<script src="./payIncome.js"></script>